<template>
  <div class="headers" style="color: #e4e2e2;">
    <div @click="popup">
    <div>
      <img class="imgs" src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=80ccf98ffe18dbfc4436a9f7cdd2eb18&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F0d338744ebf81a4c304a0456d92a6059252da631.jpg" />
    </div>
    <div style="padding-top:26px;">
      <div style="overflow: hidden;">
        <div style="float: left; margin-right: 6px">
          <img src="@/common/img/resource/img/brand@2x.png" style="height:16px"/>
        </div>
        <div style="font-size: 16px; color: #fff; font-weight: bold; line-height: 18px">
          粥品香坊（坂田）
        </div>
      </div>
      <div style="font-size:12px; color:#fff; font-wieght: 200; line-height: 12px; margin-top: 8px;">
        蜂鸟专送 / 45分钟送达
      </div>
      <div style="height: 14px; margin-top: 8px;">
        <div>
          <img src="@/common/img/resource/img/decrease_1@2x.png" style="float: left; height:14px; margin-right: 4px;"/>
        </div>
        <div style="font-size:10px; color:#fff; font-wieght: 200; line-height: 14px;">
          在线支付满28减5 ，满15减3
        </div>
      </div>
      <div style="height: 24px; width: 48px; background: rgba(7, 17, 27, 0.2); text-align: center; border-radius: 16px; float: right; position: relative; right: 10px; top: -19px; opacity: 0.5;">
        <div style="font-size:10px; color:#fff; font-weight: 200; line-height: 24px;">
          5个
        </div>
        <div>
          <img src="" />
        </div>
      </div>
    </div>
    <div style="height: 28px; margin-top: 18px; width: 100%; overflow: hidden; background: rgba(7, 17, 27, 0.2)">
      <div style="padding-left: 12px;">
        <img src="@/common/img/resource/img/bulletin@2x.png" style="float: left; margin-right: 4px; height: 16px; margin-top: 5px;"/>
      </div>
      <div style="font-size: 10px; color: #fff; font-weight:200; line-height: 28px;">
        粥，是以五谷杂粮为原料，和水熬制而成的。粥是我国的传统主食之一，也是我国饮食文化的精粹之一。
      </div>
      <div>
        <img src=""/>
      </div>
    </div>
    <div>
      <img class="background-img" src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=80ccf98ffe18dbfc4436a9f7cdd2eb18&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F0d338744ebf81a4c304a0456d92a6059252da631.jpg" />
    </div>
    </div>
    <div class="popup" v-show="popupshow">
      <div class="popupheader">
        <div class="popupcontent">
          <div style="text-align: center;">
            <h1 style="font-size: 16px; color: #fff; font-weight: 700; line-height: 16px; margin: 0;">粥品香坊（坂田）</h1>
          </div>
          <div style="text-align: center; margin-top: 16px;">
            <assess></assess>
          </div>
          <div style="display:block; text-align: center; height: 16px; margin-top: 28px;">
            <i class="line-color"></i>
            <p style="display: inline-block; margin: 0;font-size: 16px; color: rgb(255, 255, 255); font-weight: 500; line-height: 16px;">优惠信息</p>
            <i class="line-color"></i>
          </div>
          <div style="height: 16px; margin-top: 24px; margin-left: 49px;">
            <div>
              <img src="@/common/img/resource/img/decrease_1@2x.png" style="float: left; height:16px; margin-right: 6px;"/>
            </div>
            <div style="font-size: 12px; color:#fff; font-weight: 200; line-height: 16px;">
              <P style="margin: 0;">在线支付满28减5 ，满15减3</p>
            </div>
          </div>
          <div style="height: 16px; margin-top: 12px; margin-left: 49px;">
            <div>
              <img src="@/common/img/resource/img/discount_1@2x.png" style="float: left; height:16px; margin-right: 6px;"/>
            </div>
            <div style="font-size: 12px; color:#fff; font-weight: 200; line-height: 16px;">
              <P style="margin: 0;">单人经典套餐</p>
            </div>
          </div>
          <div style="height: 16px; margin-top: 12px; margin-left: 49px;">
            <div>
              <img src="@/common/img/resource/img/discount_1@2x.png" style="float: left; height:16px; margin-right: 6px;"/>
            </div>
            <div style="font-size: 12px; color:#fff; font-weight: 200; line-height: 16px;">
              <P style="margin: 0;">冰糖雪梨汤8折抢购</p>
            </div>
          </div>
          <div style="height: 16px; margin-top: 12px; margin-left: 49px;">
            <div>
              <img src="@/common/img/resource/img/special_1@2x.png" style="float: left; height:16px; margin-right: 6px;"/>
            </div>
            <div style="font-size: 12px; color:#fff; font-weight: 200; line-height: 16px;">
              <P style="margin: 0;">特价饮品八折抢购</p>
            </div>
          </div>
          <div style="height: 16px; margin-top: 12px; margin-left: 49px;">
            <div>
              <img src="@/common/img/resource/img/special_1@2x.png" style="float: left; height:16px; margin-right: 6px;"/>
            </div>
            <div style="font-size: 12px; color:#fff; font-weight: 200; line-height: 16px;">
              <P style="margin: 0;">双人特色套餐</p>
            </div>
          </div>
          <div style="display:block; text-align: center; height: 16px; margin-top: 28px;">
            <i class="line-color"></i>
            <p style="display: inline-block; margin: 0;font-size: 16px; color: rgb(255, 255, 255); font-weight: 500; line-height: 16px;">商家公告</p>
            <i class="line-color"></i>
          </div>
          <div style="margin-top: 24px; margin-left: 49px; margin-right: 49px;">
            <p style="margin: 0; font-size: 12px; color:#fff; font-weight: 200; line-height: 24px;">粥，是以五谷杂粮为原料，和水熬制而成的。粥是我国的传统主食之一，也是我国饮食文化的精粹之一。</p>
          </div>
        </div>
      </div>
      <div class="popupimg" @click="close">
        <i class="iconfont" style="font-size: 32px;">&#xe785;</i>
      </div>
    </div>
  </div>
</template>

<script>
import assess from '@/components/assess'
export default {
  name: 'header',
  data () {
    return {
      popupshow: false
    }
  },
  components: {
    assess
  },
  methods: {
    popup () {
      this.popupshow = true
    },
    close () {
      this.popupshow = false
    }
  }
}
</script>

<style scoped>
.imgs{
    width: 64px;
    height: 64px;
    border-radius: 2px;
    margin-top: 24px;
    margin-left: 24px;
    margin-right: 16px;
    float: left;
}
.headers{
    background: rgba(7, 17, 27, 0.5);
    position: relative;
}
.background-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(5px);
}
.popup{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(7, 17, 27, 0.8);
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 100;
}
.popupheader{
    min-height: 100%;
    display: inline-block;
    width: 100%;
}
.popupcontent{
    margin-top: 64px;
    padding-bottom: 64px;
}
.line-color{
    width: 30%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
    display: inline-block;
    margin: 3px 12px;
}
.popupimg{
    position: relative;
    width: 32px;
    height: 32px;
    margin: -48px auto 0 auto;
    clera: both;
}
</style>
